<div class="pm_modal {{ctrl.class}} domains" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button type="button" ng-click="ctrl.close()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <domains-menu-step></domains-menu-step>
                <span ng-show="ctrl.domain.SpfState === 0" class="pull-right pm_badge error" translate translate-comment="SPF status badge"  translate-context="SPF configuration status badge">Not set</span>
                <span ng-show="ctrl.domain.SpfState === 1 || ctrl.domain.SpfState === 2" class="pull-right pm_badge error" translate translate-comment="SPF status badge" translate-context="MX configuration status badge">Not set properly</span>
                <span ng-show="ctrl.domain.SpfState === 3" class="pull-right pm_badge success" translate translate-context="MX configuration status badge"translate-comment="SPF status badge">Good</span>
                <h4 class="modal-title">5. <span translate translate-context="Title">SPF</span> <em  translate-context="MX configuration status badge" translate>Recommended</em></h4>
            </div>
            <div class="modal-body pm_form">
                <p translate translate-context="Info">SPF is used to specify who is allowed to send email for the domain so we strongly recommend including ProtonMail in your SPF record. Please add the following TXT record into your DNS. This can typically be done in the control panel of your domain name registrar.</p>
                <p translate translate-context="Info">Please add the following TXT record. Note, DNS records can take several hours to update.</p>
                <p><a target='_blank' href='https://protonmail.com/support/knowledge-base/anti-spoofing/' translate translate-context="Action">Learn more</a></p>
                <div class="pm_table">
                    <table class="record">
                        <tr>
                            <th scope="col" style="width:3rem" translate translate-context="Title">Type</th>
                            <th scope="col" style="width:6.5rem" translate translate-context="Title">Host name</th>
                            <th scope="col" style="width: 14rem" translate translate-context="Title">Value / Data / Points to</th>
                        </tr>
                        <tr>
                            <td><code>TXT</code></td>
                            <td><code>@</code></td>
                            <td><code>v=spf1 include:_spf.protonmail.ch mx ~all</code></td>
                        </tr>
                    </table>
                </div>

                <p class="alert alert-info" translate translate-context="Info">If you want to keep an existing SPF record, you can just add <code>include:_spf.protonmail.ch</code> to it after the <code>v=spf1</code>. Do not create multiple SPF records.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="pm_button modal-footer-button" ng-click="ctrl.close()" translate translate-context="Action">Close</button>
            <button class="pm_button primary modal-footer-button" ng-click="ctrl.next()" translate translate-context="Action">Next</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
